<template>
    <div class="login_form">
        <div class="login_title">
            <img
                src="https://img.static-keyid.cn/toolspace/scrm/2023/10/16980474231081cl6i2nb8nxwu66p.png"
                alt=""
                draggable="false" />
        </div>
        <el-form ref="formRef" :model="loginForm" :rules="rules" class="demo-ruleForm">
            <el-form-item label="" prop="account">
                <el-input v-model.trim="loginForm.account" type="text" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
                <el-input
                    v-model.trim="loginForm.password"
                    type="password"
                    show-password
                    placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    @click="loginHandle"
                    :loading="loginBtnLoading"
                    :disabled="isDisabled"
                    type="primary"
                    class="login_button">
                    登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import request from '@/request';
import storage from '@/commons/storage';
import { throttle, errorHandler } from '@/commons/utils';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { computed, onMounted, reactive, ref } from 'vue';

const router = useRouter();
const formRef = ref(null);
const loginForm = reactive({ account: '', password: '' });
const rules = {
    account: [{ required: true, message: '请输入账号', trigger: ['blur', 'change'] }],
    password: [{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }]
};

// 登录按钮是否禁用
const isDisabled = computed(() => {
    return !loginForm.account || !loginForm.password;
});
const loginBtnLoading = ref(false);

// 缓存登录态并跳转
const loginAfterHandler = ({ token, account }) => {
    storage.set('Authorization', 'Bearer ' + token);
    storage.set('Account', account);
    router.replace('/pay');
};

// 登录
const loginHandle = throttle(async () => {
    await formRef.value.validate();
    loginBtnLoading.value = true;
    try {
        const { data, code, sub_code, msg } = await request('login', loginForm);
        if (code !== 0 || sub_code !== 0) {
            throw Error(msg);
        }
        loginAfterHandler(data || {});
    } catch (resp) {
        errorHandler(resp);
        loginBtnLoading.value = false;
    }
}, 1000);

// 监听enter事件（调用登录）
onMounted(() => {
    document.onkeydown = e => {
        e = window.event || e;
        if (['Enter', 'enter', 'NumpadEnter'].includes(e.code)) {
            if (isDisabled.value || loginBtnLoading.value) return;
            loginHandle();
        }
    };
});
</script>

<style lang="scss" scoped>
.login_form {
    width: 558px;
    height: 600px;
    background: #ffffff;
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1);
    padding: 71px 84px 0;
    border-radius: 4px;
    box-sizing: border-box;
    .login_title {
        margin-bottom: 73px;
        text-align: center;
        img {
            width: 392px;
            height: 56px;
        }
    }
    .el-form {
        .el-form-item {
            &:nth-child(1) {
                margin-bottom: 19px;
            }
            &:nth-child(2) {
                margin-bottom: 73px;
            }
            .el-input {
                width: 390px;
                height: 56px;
                box-sizing: border-box;
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid #e5e5e5;
                :deep(.el-input__wrapper) {
                    padding: 0 20px;
                    .el-input__inner {
                        line-height: 32px;
                        font-size: 18px;
                        color: #333333;
                        &::placeholder {
                            font-size: 18px;
                            color: #999999;
                            line-height: 25px;
                        }
                    }
                }
            }
        }
    }
    .login_button {
        width: 100%;
        height: 56px;
        border-radius: 4px;
        font-size: 22px;
        font-weight: 500;
    }
}
</style>
